"use client";

import {LuckyWheelPage} from "@/app/pages/lucky/lucky-wheel-page";
import {LuckyGridPage} from "@/app/pages/lucky/lucky-grid-page";
import dynamic from "next/dynamic";
import {useState} from "react";

const StrategyArmoryButton = dynamic(async () => (await import("./components/StrategyArmory")).StrategyArmory)
const StrategyRuleWeightButton = dynamic(async () => (await import("./components/StrategyRuleWeight")).StrategyRuleWeight)
const MemberCardButton = dynamic(async () => (await import("./components/MemberCard")).MemberCard)
const SkuProductButton = dynamic(async () => (await import("./components/SkuProduct")).SkuProduct)
// 在现有import部分添加（保持原有导入顺序）
const InfoAlert = dynamic(() => import("./components/InfoAlert").then(mod => mod.InfoAlert));

export default function Home() {

    const [refresh, setRefresh] = useState(0);

    const handleRefresh = () => {
        setRefresh(refresh + 1)
    };

    return (

        <div className="flex flex-col items-center min-h-screen bg-[#e7305e]"
             style={{backgroundImage: "url('/background.svg')"}}>

            <InfoAlert />

            {/* 页面标题头部 */}
            <header className="w-full max-w-6xl px-4 text-center py-2 md:py-2 relative group">
                {/* 背景光晕特效 */}
                <div
                    className="absolute inset-0 bg-[radial-gradient(circle_at_center,#fbbf2420_0%,transparent_60%)] group-hover:opacity-100 opacity-50 transition-opacity duration-1000"/>

                {/* 动态标题 */}
                <h1 className="text-4xl md:text-5xl xl:text-6xl font-bold tracking-tight">
            <span className="relative inline-block">
                {/* 文字装饰线 */}
                <span
                    className="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-amber-400 via-orange-300 to-amber-400 rounded-full opacity-80"/>

                {/* 动态渐变文字 */}
                <span className="bg-gradient-to-r from-amber-300 via-white to-amber-200
                              bg-clip-text text-transparent
                              animate-text-shine
                              relative z-10
                              drop-shadow-[0_3px_6px_rgba(251,191,36,0.3)]">
                    营销系统 · Raffle Marketing
                </span>
            </span>
            {/* 副标题装饰 */}
            <span className="block mt-3 text-xl md:text-2xl font-semibold">
                <span className="text-amber-100/90 inline-flex items-center">
                    <span className="mr-2 text-2xl">✨</span>
                    <span className="bg-gradient-to-r from-amber-100 to-orange-200 bg-clip-text text-transparent">
                        惊喜大奖等你来拿
                    </span>
                    <span className="ml-2 animate-pulse">🎯</span>
                </span>
            </span>
                </h1>
                {/* 流动边框效果 */}
                <div
                    className="absolute inset-x-6 bottom-0 h-px bg-gradient-to-r from-transparent via-amber-400/50 to-transparent"/>
            </header>


        {/* 主内容区 */
        }
        <main className="w-full max-w-7xl px-4 flex-1 space-y-8">

            {/* 左侧-(活动装配按钮 & 会员卡) & 右侧-（商品区 2x2布局） */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 h-[360px]">
                {/* 活动装配+会员卡账户 */}
                <div className="h-full flex-col gap-0.5">
                    {/* 活动装配---按钮区 */}
                    <div className="flex justify-center">
                        <StrategyArmoryButton
                            className="bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-xl transition-all hover:shadow-md flex items-center gap-0.5 text-lg"
                        />
                    </div>
                    {/* 会员卡 */}
                    <MemberCardButton allRefresh={refresh} className="h-full"/>
                </div>
                {/* 积分兑换活动抽奖次数-商品区 */}
                <div className="h-full flex flex-col">
                    <SkuProductButton handleRefresh={handleRefresh}/>
                </div>
            </div>

            {/* 抽奖组件双栏布局 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 min-h-[300px]">
                {/* 抽奖区域 - 完全居中 */}
                <div className="flex justify-center items-center min-h-[320px]"> {/* 新增的居中容器 */}
                    <div
                        className="shadow-2xl rounded-2xl p-1 flex justify-center items-center"
                        style={{
                            width: "320px",
                            height: "320px",
                            background: "linear-gradient(135deg, rgba(245,245,255,0.9) 0%, rgba(220,230,255,0.9) 100%)"
                        }}
                    >
                        <LuckyGridPage
                            handleRefresh={handleRefresh}
                            className="h-[300px] w-[300px] bg-white/50 rounded-lg"
                        />
                    </div>
                </div>
                {/* 策略规则按钮 */}
                <div className="justify-start mt-16">
                    <StrategyRuleWeightButton
                        refresh={refresh}
                        className="bg-white/20 hover:bg-white/30 text-white px-10 py-4 rounded-xl
                transition-all hover:shadow-md font-medium text-lg"
                    />
                </div>
            </div>

        </main>

            {/* 底部 */}
            {/* 底部 - 紧凑版 */}
            <footer
                className="w-full max-w-7xl px-4 text-white/70 text-center py-4 text-sm md:text-base"> {/* 从py-6改为py-4 */}
                <div className="border-t border-white/20 pt-2"> {/* 保持原有上边框样式 */}
                    营销系统项目·Raffle Marketing Gitee:
                    <a href='https://gitee.com/zhihaosl'
                       target='_blank'
                       className="text-amber-200 hover:text-amber-100 ml-2 transition-colors
           underline underline-offset-4 decoration-white/30 hover:decoration-amber-200">
                        https://gitee.com/zhihaosl
                    </a>
                    <span className="block md:inline mt-2 md:mt-0"> @知好</span>
                </div>
            </footer>
        </div>

    );
}
